<!--
      Virtual Globe Demo
-->
<!DOCTYPE html>
<html>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="X-UA-Compatible" content="chrome=1">
         <!-- >
            <script type="text/javascript" src="http://benvanik.github.com/WebGL-Inspector/core/embed.js"></script>  
         -->
         <script type="text/javascript" src="../../../external/closure-library/closure/goog/base.js"></script>
         <script type="text/javascript" src="../../../compiled/deps.js"></script>
         <script type="text/javascript">goog.require('owg.OpenWebGlobe');</script>
         
         
         <script type="text/javascript" src="externals/jquery-1.5.2.min.js"></script>
       <!--  <script type="text/javascript" src="externals/openwebglobe.js"></script>-->
         <script type="text/javascript" src="tools/toolbox.js"></script>
         <script type="text/javascript" src="tools/tool.js"></script>
         <script type="text/javascript" src="tools/coordinates.js"></script>
         <script type="text/javascript" src="externals/wgs84_ch1903.js"></script>
         <script type="text/javascript" src="swisstopoapi.js"></script>
         <link rel="stylesheet" type="text/css" href="tools/toolstyle.css">
         <link rel="stylesheet" type="text/css" href="styles.css">
            
<style type="text/css">        
</style>
<script type="text/javascript">
               
         var g_context = -1;
         var scene = -1;
         var world = -1;
         var poilayer = -1;
         var poiloader = null;
      
      
         //---------------------------------------------------------------------
         var count = 0;
         function OnRender(context)
         {
   
   
            ogSetTextColor(context, 1,1,0);
            ogDrawText(context, "Hello World", 0, 20);
   
         }
        
         //---------------------------------------------------------------------
        
         function main()
         {
            ogSetArtworkDirectory("../../../art/");
            
            // (1) create an OpenWebGlobe context using canvas
            g_context = ogCreateContextFromCanvas("canvas", true);
   
            // (2) Create a virtual globe
            var globe = ogCreateGlobe(g_context);
            

            // (3) Add image and an elevation layers
            var imgBlueMarble500 = 
            {
               url     : ["http://www.openwebglobe.org/data/img"],
               layer   : "World500",
               service : "i3d"
            };
            
            var imgLandsat_CH = 
            {
               url     : ["http://www.openwebglobe.org/data/img"],
               layer   : "LandsatCH",
               /*transparency : 0.5,*/
               service : "i3d"
            };
            
            var elvSRTM_CH = 
            {
               url     : ["http://www.openwebglobe.org/data/elv"],
               layer   : "SRTM",
               service : "i3d"
            };
            
            var imgSWISSTOPO = 
            {
                  url     : ["http://10.42.2.37"],
                  layer   : "swissimage", 
                  service : "owg"
            };
            
            var elvDHM_GR =
            {
                  url     : ["http://10.42.2.37"],
                  layer   : "DHM25GR",
                  service : "owg"
            }
            
            
            ogAddImageLayer(globe, imgBlueMarble500);
            ogAddImageLayer(globe, imgLandsat_CH);
            ogAddElevationLayer(globe, elvSRTM_CH);
            //ogAddImageLayer(globe, imgSWISSTOPO);
            //ogAddElevationLayer(globe, elvDHM_GR);
                        

            
            // (4) Set the "Render-Callback" function.
            // The callback function will be called everytime a frame is drawn.
            ogSetRenderFunction(g_context, OnRender);
            
            // (5) Set the background color
            ogSetBackgroundColor(g_context, 0.2,0.2,0.7,1);
            
            
            
            scene = ogGetScene(g_context);
            world = ogGetWorld(scene);
         
            

         }
         
         
         
         jQuery(document).ready(function() {
          
         /*
          *   Top-Row..............................................................
          */
         
            var topRowHandling = function(){
              if ( parseInt(jQuery('#divTopRow').css("top")) > -80 )
              {
               //scroll up
               jQuery('#divTopRow').animate({top:'-500'},1000,function(){jQuery('#divTopRowTitle').toggle();});
               jQuery('#canvas').unbind('click');
              }
              else
              {
               //scroll down
               jQuery('#divTopRowTitle').toggle();
               jQuery('#divTopRow').animate({top:'0'},1000,function(){});
               jQuery('#canvas').click(topRowHandling);
              }
             };
            jQuery('#divTopRow,#canvas').click(topRowHandling);
                                          
            
       
        
         
          /*
           *   FHNW Logo..............................................................
           */ 
            jQuery('#divFhnwLogo').click(function(){ window.open("http://www.fhnw.ch/homepage");});
            jQuery('#divCamptocamp').click(function(){ window.open("http://www.camptocamp.com");});
         
         
          /*
           *   Fly to feature..............................................................
           */
          
            jQuery('#divFlyToPullBtn').click(function(){
              if ( parseInt(jQuery('#divFlyTo').css("left")) > -1 )
              {
                  jQuery('#divFlyTo').animate({left:'-300'},1000,function(){});
              }
              else
              {
                 jQuery('#divFlyTo').animate({left:'0'},1000,function(){});
              }
             });            
               
            

          /*
           *   Like Buttons (Twitter,Facebook etc.)..................................
           */ 
     
          
          /*
           *   Stats, currently not used..................................
           */  
              
         
          /*
           *   Credits..................................
           */
           jQuery('#divCreditsBtn').click(function(){
              if ( parseInt(jQuery('#divCredits').css("bottom")) > -1 )
              {
                  jQuery('#divCredits').animate({bottom:'-250'},1000,function(){});
              }
              else
              {
                 jQuery('#divCredits').animate({bottom:'6px'},1000,function(){});
              }
             });
         
          
         
         
                  
           
          /*
           *   Handle visibility on start-up..................................
           */      
         jQuery('#divFhnwLogo').show("slow");
         jQuery('#divCamptocamp').show("slow");
         jQuery('#divFlyTo').slideToggle("slow");
          //jQuery('#divStats').slideToggle("slow");
         jQuery('#divCredits').slideToggle("slow");
         
  
         /*
          *    Toolbox
          */
            //var tb = new ToolBox('toolbox','canvas');
         
         });
         

         /*
          *  Fly-to Button callback
          */
         function getPlaceSearchResults()
         {
            var textInput = jQuery('#placeSearchTb').val();
            while(textInput.indexOf(' ')!=-1)textInput = textInput.replace(' ','+'); //replace spaces with '+'

            var service = new swisstopoapi(null,_cbfAjaxQuery);
            var targets = service.searchplace(textInput);
            
       
         }
        
         /*
          *  Fly to results callback
          */
         function _cbfAjaxQuery(result)
         {
            if(this.targets.length == 0)
            {
                    jQuery("#placeList").empty();
                    jQuery("#placeList")
                              .append(jQuery("<li>")
                              .addClass("placeSearchResult")
                              .text("No place found..."));
            }
            else if(this.targets.length == 1)
            {
               flyTo(this.targets[0].lng,this.targets[0].lat,this.targets[0].elv,this.targets[0].name);
            }
            else
            {
                  jQuery("#placeList").empty();
                 jQuery.each(targets,
                        function(index,content)
                        {  
                        if(index<10)
                        {                           
                           jQuery("#placeList")
                           .append(jQuery("<li>")
                           .addClass("placeSearchResult")
                           .text(content.name)
                           .attr("lat",content.lat)
                           .attr("lng",content.lng)
                           .attr("elv",content.elv)
                           .click(function()
                                  {
                                    flyTo(parseFloat(this.attributes.lng.nodeValue),parseFloat(this.attributes.lat.nodeValue),parseFloat(this.attributes.elv.nodeValue),this.textContent);
                                    
                                    }));                       
                        }      
                        }
                        ); 
            }
            
         }
         
         /*
          * Fly to function
          */
         function flyTo(lon,lat,elv,name)
         {
           
            var PoiDefinition = 
            {
                  text 		: 	name,
                  position :  [lon, lat, elv],
                  size 		: 	5,
                  flagpole :  true
            };
            ogCreatePOI(poilayer,PoiDefinition);
            var ori = ogGetOrientation(scene);
 
            ogFlyToLookAtPosition(scene,lon,lat,500,8000,ori.yaw,-30,ori.roll);
            jQuery('#divFlyTo').animate({left:'-300'},1000,function(){}); //pull-in menu
         }
        
         
        
         
         //---------------------------------------------------------------------
         
      </script>
    </head>
    <body onload="main()" style="background-color:#000000; overflow:hidden;">
        <div style="text-align: center">           
            <canvas id="canvas"></canvas>
            <div id='divTopRow'>
               <div id='divTopRowBtn'></div>
               <div id=divTopRowContent>               
               <h1>Welcome to OpenWebGlobe SDK WebGL Viewer</h1>
               <p> This is the WebGL Version of the OpenWebGlobe SDK. With the OpenWebGlobe SDK you can create your own virtual globe applications.
                   You can develop your new application in your favorite language like C++, C#, Visual Basic, Python, JavaScript.
                   OpenWebGlobe SDK was initiated by the Geomatics Engineering department at the University of Applied Sciences Northwestern
                   Switzerland.
                   <br>
                   <br>
                   To navigate just click somewhere on the globe and drag into the desired direction.
                   Use the 'Q' and 'A' key to move up and down and see the world in more details.
                   With the scrolling wheel you can adjust camera pitch.
                   <br>
                   <br><!--
                   Try it for yourselves, just click on this panel and start exploring the world.
                   Don't forget to try the new "FlyTo" feature, just click on the button at the left border...-->
  
               </p>                  
               </div>
               <div id="divTopRowTitle">OpenWebGlobe WebGL Viewer</div>
            </div>           
           <div id='divFlyTo'>
               <div id="divFlyToPullBtn"></div>
               <div id= "divSearchInput">
                  <input id="placeSearchTb" type="text" name="flyto"/>
                  <input type="button" onclick="getPlaceSearchResults()" value="FlyTo" />
               </div>
                  <ul id="placeList"></ul>
               </div>
            </div> 
            <div id='divFhnwLogo'></div> 
            <div id='divCamptocamp'></div>
            <div id='divStats'></div>
            <div id='divToolbox'></div>
            
            <div id='divCredits'>
               <div id='divCreditsBtn'></div>
               <h3>Created by</h3>
               <p>Martin Christen
               <br>
                  <p class='creditsSmall'><a href='http://www.fhnw.ch/homepage' target="_blank">FHNW</a><p>
               <br>
               Benjamin Loesch
               <br>
                  <p class='creditsSmall'><a href='http://www.fhnw.ch/homepage' target="_blank">FHNW</a><p>
               <br>
               Tom Payne
               <br>
                  <p class='creditsSmall'><a href='http://www.camptocamp.com' target="_blank">Camptocamp</a><p>
               <br>
               </p>
            </div>              
        </div>
    </body>
</html>
